import React from 'react';
import { observer } from 'mobx-react'
import { Card, Descriptions, Modal, Tag, Table, Divider } from 'antd';
import store from './store';

@observer
class GoodsOrderDetail extends React.Component {
    getStatusTag = (status) => {
        const statusMap = {
            'pending': { color: 'orange', text: '待支付' },
            'paid': { color: 'green', text: '已支付' },
            'cancelled': { color: 'default', text: '已取消' }
        };
        const { color, text } = statusMap[status] || { color: 'default', text: status };
        return <Tag color={color}>{text}</Tag>;
    };

    getClassTypeText = (type) => {
        return type === 'in_school' ? '校内上课' : '校外上课';
    };

    getGradeText = (grade) => {
        if (!grade) return '-';
        const gradeMap = {
            'grade_1': '高一',
            'grade_2': '高二',
            'grade_3': '高三'
        };
        return gradeMap[grade] || grade;
    };

    getClassNumberText = (classNumber) => {
        if (!classNumber) return '-';
        return classNumber.replace('class_', '') + '班';
    };

    getPaymentTypeText = (type) => {
        return type === 'wechat' ? '微信支付' : '线下汇款';
    };

    render() {
        const info = store.detail_record;
        
        // 课程列表列定义
        const courseColumns = [
            {
                title: '课程名称',
                dataIndex: 'course_name',
                key: 'course_name',
            },
            {
                title: '课程价格',
                dataIndex: 'price',
                key: 'price',
                render: (text) => `¥${text}`
            }
        ];

        return (
            <Modal
            visible
                width="80%"
            maskClosable={false}
            title={'订单详情'}
            onCancel={() => store.detailVisible = false}
            onOk={() => store.detailVisible = false}>
            <div>
                <Card>
                        <Descriptions title="基本信息" bordered>
                            <Descriptions.Item label="订单编号" span={2}>{info.order_no}</Descriptions.Item>
                            <Descriptions.Item label="订单状态">{this.getStatusTag(info.status)}</Descriptions.Item>
                            <Descriptions.Item label="创建时间" span={2}>{info.created_at}</Descriptions.Item>
                            <Descriptions.Item label="支付时间">{info.paid_time || '-'}</Descriptions.Item>
                        </Descriptions>
                        
                        <Divider />
                        
                        <Descriptions title="学生信息" bordered>
                            <Descriptions.Item label="学生姓名">{info.student_name}</Descriptions.Item>
                            <Descriptions.Item label="身份证号">{info.student_id_card}</Descriptions.Item>
                            <Descriptions.Item label="学员类型">{info.student_type}</Descriptions.Item>
                            <Descriptions.Item label="家长姓名">{info.parent_name}</Descriptions.Item>
                            <Descriptions.Item label="家长手机">{info.parent_phone}</Descriptions.Item>
                            <Descriptions.Item label="上课类型">{this.getClassTypeText(info.class_type)}</Descriptions.Item>
                            {info.class_type === 'in_school' && (
                                <>
                                    <Descriptions.Item label="年级">{this.getGradeText(info.grade)}</Descriptions.Item>
                                    <Descriptions.Item label="班级">{this.getClassNumberText(info.class_number)}</Descriptions.Item>
                                </>
                            )}
                    </Descriptions>
                        
                        <Divider />
                        
                        <Descriptions title="学校信息" bordered>
                            <Descriptions.Item label="学校名称" span={2}>{info.school_name}</Descriptions.Item>
                            <Descriptions.Item label="考试年份">{info.exam_year}</Descriptions.Item>
                    </Descriptions>
                        
                        <Divider />
                        
                        <Descriptions title="支付信息" bordered>
                            <Descriptions.Item label="支付方式">{this.getPaymentTypeText(info.payment_type)}</Descriptions.Item>
                            <Descriptions.Item label="订单金额">¥{info.total_amount}</Descriptions.Item>
                            <Descriptions.Item label="交易号">{info.transaction_id || '-'}</Descriptions.Item>
                            {info.payment_type === 'offline' && (
                                <Descriptions.Item label="付款码" span={3}>{info.payment_code || '-'}</Descriptions.Item>
                            )}
                    </Descriptions>
                        
                        <Divider />
                        
                        <h3 style={{ marginBottom: 16 }}>课程信息</h3>
                        <Table 
                            dataSource={info.courses || []} 
                            columns={courseColumns} 
                            rowKey="id"
                            pagination={false}
                            bordered
                        />
                </Card>
            </div>
            </Modal>
        )
    }
}

export default GoodsOrderDetail

